<template>
  <div id="search-page" :style="{
    paddingTop:(this.getSafeArea().top-4)+'px'
  }">
    <div class="search-top-bar" :style="{top:(this.getSafeArea().top-3)+'px'}">
      <i class="icon el-icon-arrow-left" @click="$router.push('/')"></i>
      <el-input class="keyword-input" v-model="filterForm.name" placeholder="请输入您要搜索的关键词"  @keyup.enter.native="getList"></el-input>
      <button class="search-button" @click="getList">搜索</button>
      <button class="switch-button" @click="$router.push('/SearchResultShop?act=getList')">
        <i class="el-icon-refresh"></i>
        <span>店铺</span>
      </button>
      <div class="c"></div>
    </div>

    <!--筛选栏-->
    <product-filter-bar :style="{top:(this.getSafeArea().top-2+40)+'px'}" ref="productFilterBar" v-if="isInit" :callback="filterSet" :classify-params="{
      id:filterForm.classifyId,
      name:filterForm.classifyName
    }"/>

<!--    <div id="product-list" style="padding-top: 40px;">-->
<!--      <div align="center" v-if="productList.length===0">暂无数据..</div>-->
<!--      <product-list-item v-for="(product,key) in productList" :key="key" :curr-product="product" :show-type="0"/>-->
<!--      <div class="c"></div>-->
<!--    </div>-->

    <i-scroller-box
      id="product-list"
      ref="i-scroller-box"
      :url="'ShopProduct/getList'"
      :height="this.getWinSize().height-this.getSafeArea().top-90"
      style="position: relative;"
      :style="{
      top:(80)+'px'
      }">
      <template v-slot:list-item="{index,data}">
        <product-list-item :index="index" :show-type="0" :curr-product="data"></product-list-item>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import ProductListItem from "../common/ProductListItem";
import ProductFilterBar from '../common/ProductFilterBar'
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: "SearchResult",
  components: {IScrollerBox, ProductFilterBar, ProductListItem},
  data:function (){
    return {
      productList:[],
      filterForm:{
        name:'',
        classifyName:'',
        classifyId:0,
        ids:[],
      },
      isInit:false
    }
  },
  mounted() {
    if (this.$route.query.searchKeywords && this.$route.query.searchKeywords.length>0){
      this.filterForm.name=this.$route.query.searchKeywords
    }
    if (this.$route.query.classifyId && this.$route.query.classifyId>0){
      this.filterForm.classifyId=this.$route.query.classifyId
      this.filterForm.classifyName=this.$route.query.classifyName
    }
    if (this.$route.query.brandId && this.$route.query.brandId>0){
      this.filterForm.brandId=this.$route.query.brandId
    }
    if (this.$route.query.type && this.$route.query.type==='image'){
      var productStockIdListString=localStorage.getItem('SearchProductStockIdList');
      if (productStockIdListString && productStockIdListString.length>2){
        var productStockIdList=JSON.parse(productStockIdListString)
        this.filterForm.stockIds=productStockIdList.join(',')
      }else{
        this.filterForm.stockIds=''
      }
    }
    this.isInit=true
    this.getList()
    this.$forceUpdate()
  },
  methods:{
    getList:function () {
      this.$refs['i-scroller-box'].getList({
        form:this.filterForm
      })
    },
    filterSet:function (form) {
      console.log('form',form)
      this.filterForm=Object.assign(this.filterForm,form)
      console.log('this.filterForm',this.filterForm)
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
